<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 日志图表 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-row>
        <el-col>
          <div id="dayInitMain" :style="{ width: '100%', height: '500px' }"></div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { index } from '../../../api/index';


export default {
  data() {
    return {

    };
  },

  created() {
    // this.dayInit();
  },
  mounted() {
    this.dayInit();
  },
  methods: {
    //每日数据初始化
    dayInit() {
      let myChart = this.$echarts.init(document.getElementById('dayInitMain'));
      myChart.setOption({
        legend: {
          data: ['今日实际上门', '明日预计上门', '今日通话时长', '今日通话次数', '今日微信添加数']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['王莉', '刘辉', '张珊', '老李', '王五'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '今日实际上门',
            type: 'bar',
            data: [3, 2, 4, 6, 3]
          },
          {
            name: '明日预计上门',
            type: 'bar',
            data: [5, 2, 7, 4, 1]
          },
          {
            name: '今日通话时长',
            type: 'bar',
            data: [60, 74, 120, 23, 34]
          },
          {
            name: '今日通话次数',
            type: 'bar',
            data: [23, 32, 43, 23, 54]
          },
          {
            name: '今日微信添加数',
            type: 'bar',
            data: [5, 34, 12, 32, 23]
          }
        ]
      })
    },
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
</style>
